<!-- 搜索 -->
<template>
  <div class="search">
    <section class="search-page">
      <form>
        <div class="search-warp">
          <div class="back">
            <i
              class="iconfont icon-fanhui1"
              onclick="window.history.back()"
            ></i>
          </div>
          <div class="input-text">
            <input
              type="search"
              name="keyword"
              placeholder="搜索商品"
              class="input-text"
            />
            <label class="search-check">
              <i class="iconfont icon-sousuo"></i>
            </label>
          </div>
          <a href="javascript:;" class="search-btn">搜索</a>
        </div>
      </form>
    </section>
    <div class="ms-search-wraper">
      <div class="search-con">
        <div class="ms-search-head">
          <p>最近搜索</p>
          <i class="iconfont icon-delete"></i>
        </div>
        <div class="ms-search-tags">
          <span><a href="javascript:;">暂无</a></span>
        </div>
      </div>
      <div class="search-con">
        <div class="ms-search-head"><p>热门搜索</p></div>
        <div class="ms-search-tags">
          <span><a href="javascript:;">周大福</a></span
          ><span><a href="javascript:;">内衣</a></span
          ><span><a href="javascript:;">Five Plus</a></span
          ><span><a href="javascript:;">手机</a></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
};
</script>
<style lang="less">
.search {
  background-color: #fff;
  .search-page {
    width: 100%;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1;
    padding: 0.8rem 0;
    .search-warp {
      padding: 0 1rem;
      position: relative;
      height: 2.8rem;
      display: flex;
      align-items: center;
      .back {
        position: relative;
        height: 2.8rem;
        line-height: 2.8rem;
        text-align: left;
        i {
          font-size: 1.6rem;
          color: #999;
        }
      }
      .input-text {
        overflow: hidden;
        position: relative;
        border-radius: 1.5rem;
        border: 1px solid #ddd;
        margin: 0 1rem;
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        input {
          height: 2.8rem;
          line-height: 2.8rem;
          box-sizing: border-box;
          width: 100%;
          color: #666;
          font-size: 1.3rem;
          outline: none;
          border: 0;
          padding: 0 0 0 1.2rem;
          margin: 0;
        }
        .search-check {
          margin: 0 1rem;
          box-sizing: border-box;
          display: inline-block;
          max-width: 100%;
          font-weight: 400;
          color: #666;
          i {
            font-size: 1.6rem;
          }
        }
      }
      .search-btn {
        display: block;
        height: 2.8rem;
        line-height: 2.8rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        margin-left: 0;
        font-size: 1.3rem;
        padding: 0;
        text-align: right;
      }
    }
  }
  .ms-search-wraper {
    position: relative;
    .search-con {
      padding: 0 1rem;
      margin-top: 1.5rem;
      .ms-search-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 1rem;
        p {
          font-size: 1.4rem;
          color: #232326;
          width: 100px;
          padding-left: 1px;
        }
      }
      .ms-search-tags {
        overflow: hidden;
        font-size: 1rem;
        text-align: center;
        span {
          display: block;
          max-width: 100%;
          overflow: hidden;
          padding-right: 1rem;
          padding-bottom: 1rem;
          float: left;
          a {
            height: 2rem;
            line-height: 2rem;
            font-size: 1rem;
            border-radius: 3px;
            display: block;
            width: 100%;
            color: #686868;
            white-space: nowrap;
            text-overflow: ellipsis;
            background-color: #f0f2f5;
            padding: 0 1rem;
            overflow: hidden;
            box-sizing: border-box;
          }
        }
      }
    }
    .hot-search {
      padding: 0 1rem;
      margin-top: 1.5rem;
    }
  }
}
</style>